<!--
 * @Author: early-autumn
 * @Date: 2020-05-09 09:38:07
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-06 15:54:23
 -->
<template>
  <div class="app-container">
    <el-page-header :style="{ marginBottom: '20px' }" @back="routerBack">
      <div slot="content" class="content">
        <el-form inline>
          <el-form-item :label="patient.name"></el-form-item>
          <el-form-item :label="`${patient.age}`"></el-form-item>
          <el-form-item :label="sexEnum[patient.sex]"></el-form-item>
          <el-form-item label="手机号：">
            {{
            patient.phoneNumber
            }}
          </el-form-item>
          <el-form-item label="病历：">{{ patient.caseNumber }}</el-form-item>
          <template v-if="$route.query.appointmentId">
            <el-form-item label="TC：">{{ appointment.tcName }}</el-form-item>
            <el-form-item label="医生：">
              {{
              appointment.doctorName
              }}
            </el-form-item>
          </template>
        </el-form>
      </div>
    </el-page-header>

    <el-tabs id="print" v-model="currentTab" type="border-card">
      <el-tab-pane
        v-for="option in tabOptions"
        :key="option.label"
        :label="option.label"
        :name="option.name"
        :lazy="true"
      >
        <component
          :is="option.name"
          v-if="isRouterAlive && currentTab === option.name"
          :patient="patient"
          :user-message="userMessage"
          @change="getPerson"
          @update="getPerson"
        ></component>
      </el-tab-pane>
    </el-tabs>
    <user-matcher-result contains-temp-clinic-person></user-matcher-result>
    <user-matcher-appointment></user-matcher-appointment>
  </div>
</template>

<script>
import { getPerson } from '@/api/services/person'
import { getAppointment } from '@/api/services/appointment'
import { sexEnum } from '@/utils/enums'
import routerBack from '@/mixins/routerBack'

import {
  ChargeRecordPane,
  MedicalRecordPane,
  MemberInformationPane,
  NonClosingRecordPane,
  PatientInformationPane,
  SeeingRecordPane,
  TCVisitRecordPane,
  TreatmentRecordPane,
} from '@/views/components/TabsPanes'
import { getReservation } from '@/api/erp/reservation'

export default {
  name: 'ShopDetails',
  components: {
    PatientInformationPane,
    TreatmentRecordPane,
    SeeingRecordPane,
    NonClosingRecordPane,
    ChargeRecordPane,
    MedicalRecordPane,
    MemberInformationPane,
    TCVisitRecordPane,
    UserMatcherResult: () => import('@/components/yiya/UserMatcherResult'),
    UserMatcherAppointment: () =>
      import('@/components/yiya/UserMatcherAppointment'),
    PatientInformation: () =>
      import('@/views/userMessageHandle/components/PatientInformation'),
  },
  mixins: [routerBack],
  data() {
    return {
      loading: false,
      tabOptions: [
        {
          label: '患者信息',
          name: 'PatientInformationPane',
        },
        {
          label: '就诊记录',
          name: 'TreatmentRecordPane',
        },
        {
          label: '看诊记录',
          name: 'SeeingRecordPane',
        },
        {
          label: '未结账记录',
          name: 'NonClosingRecordPane',
        },
        {
          label: '收费记录',
          name: 'ChargeRecordPane',
        },
        {
          label: '病历',
          name: 'MedicalRecordPane',
        },
        // {
        //   label: '会员信息',
        //   name: 'MemberInformationPane',
        // },
        {
          label: 'TC回访记录',
          name: 'TCVisitRecordPane',
        },
      ],
      currentTab: 'PatientInformationPane',
      patient: {},
      isRouterAlive: true,
      userMessage: {},
    }
  },
  computed: {
    sexEnum() {
      return sexEnum
    },
  },
  watch: {
    currentTab() {
      this.reload()
    },
    async $route(to, from) {
      await this.getPerson()
      this.reload()
    },
  },
  mounted() {
    this.getPerson()
  },
  methods: {
    async getPerson() {
      const { data } = await getPerson(this.$route.query.id)
      this.patient = data
      if (data.marketReservationId) {
        await getReservation(data.marketReservationId).then((res) => {
          this.userMessage = res.data
          let arr = [
            res.data.channelFirst,
            res.data.channelSecond,
            res.data.channelThird,
          ]
          this.userMessage.channel = arr.filter((item) => item)
          this.userMessage.projectOptions = res.data.visitDisease.split('-')
          if (!this.tabOptions.find((item) => item.label == '市场患者信息')) {
            this.tabOptions.splice(1, 0, {
              label: '市场患者信息',
              name: 'PatientInformation',
            })
          }
        })
      }
    },
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => (this.isRouterAlive = true))
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  margin-top: -6px;
  height: 20px;
}
</style>
